<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>IndexedDB</title>
	</head>
	<body>
		<!--
		IndexedDB 是一个浏览器内建数据库。
		支持多种类型的键，来存储几乎可以是任何类型的值。
		-->

		<script>
			// 使用 open 连接一个数据库
			const openRequest = window.indexedDB.open('myDatabase', 1)

			// 如果客户端没有数据库则触发
			openRequest.onupgradeneeded = () => {
				console.log('初始化数据库')
			}

			openRequest.onerror = () => {
				console.log('数据库创建失败')
			}

			// 数据库连接成功
			openRequest.onupgradeneeded = (event) => {
				console.log('初始化数据库')
				const db = event.target.result
				if (!db.objectStoreNames.contains('myObjectStore')) {
					db.createObjectStore('myObjectStore', { keyPath: 'id' })
				}

				openRequest.onsuccess = () => {
					console.log('存在数据库')
					// 继续使用 db 对象处理数据库
					console.log('db', db)
				}
			}
		</script>
	</body>
</html>
